<template>
  <div class="employees-container">
    <div class="app-container">
      <!-- 头部工具栏插件 -->
      <page-tools>
        <!-- 插入到left插槽位置 -->
        <template #left>
          <span>本月: 社保在缴 公积金在缴</span>
        </template>
        <!-- 插入到right插槽位置 -->
        <template #right>
          <el-button type="primary" size="small" @click="$router.push('/import')">导入excel</el-button>
          <el-button type="primary" size="small" @click="exportExcel">导出excel</el-button>
          <el-button type="primary" size="small" @click="addEmploy">新增员工</el-button>
        </template>
      </page-tools>

      <el-card style="margin-top: 10px">
        <el-table border :data="empList">
          <el-table-column label="序号" type="index" width="120" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="头像">
            <template #default="{row}">
              <!-- <img :src="row.staffPhoto" alt="" width="80"> -->
              <el-image :src="row.staffPhoto" class="img-container" @click="createQR(row)">
                <!-- 新语法 : 具名插槽 通过 template中的  #插槽名称 属性 -->
                <!-- 当图片加载出错的时候自动显示 -->
                <template #error>
                  <i class="el-icon-picture-outline" />
                  <!-- 图片加载失败 -->
                </template>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="聘用形式">
            <template #default="{row}">
              {{ formatEmployment(row.formOfEmployment) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间">
            <template #default="{row}">
              {{ formatTime(row.timeOfEntry) }}
            </template>
          </el-table-column>
          <!-- <el-table-column label="账户状态" prop="enableState" /> -->
          <el-table-column label="操作" sortable="" fixed="right" width="200">
            <template #default="{row}">
              <el-button type="text" size="small" @click="goDetail(row.id)">查看</el-button>
              <el-button type="text" size="small" @click="editRole(row.id)">分配角色</el-button>
              <el-button type="text" size="small" @click="deleteEmploy(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div style="height: 60px; margin-top: 10px">
          <el-pagination
            :page-size="params.size"
            :total="total"
            layout="prev,pager,next"
            @current-change="pageChange"
          />
        </div>
      </el-card>
    </div>
    <AddEmployee
      :show-dialog="showDialog"
      @close-dialog="closeDialog"
      @updataEmploy="getEmployeeList"
    />

    <!-- 分享展示, 预览的二维码的弹层 -->
    <el-dialog title="二维码" :visible="showCodeDialog" @close="showCodeDialog = false">
      <!-- 二维码 -->
      <canvas ref="myCanvas" />
    </el-dialog>

    <!-- 分配角色弹出框 -->
    <AssignRole
      :cur-id="curId"
      :show-role-dialog="showRoleDialog"
      @close-dialog="closeRoleDialog"
    />
  </div>
</template>

<script>
import { reqGetEmployeeList, delEmployee } from '@/api/employees'
// 引入新增弹出框组件
import AddEmployee from './components/AddEmployee.vue'
import AssignRole from './components/assign-role.vue'
import dayjs from 'dayjs'
import { transSourceDataToArray } from '@/utils/excelData'
import QrCode from 'qrcode'
export default {
  components: {
    AddEmployee,
    AssignRole
  },
  data() {
    return {
      empList: [], // 用于存放员工列表数据
      params: {
        page: 1, // 当前页
        size: 10 // 每页条数
      },
      total: 0, // 数据总条数
      showDialog: false, // 控制新增弹出框是否显示
      showCodeDialog: false, // 控制二维码弹出框是否显示
      showRoleDialog: false, // 控制分配角色弹出框是否显示
      curId: ''// 绑定当前点击项的id
    }
  },
  mounted() {
    // 当页面挂载上调用获取员工列表方法
    this.getEmployeeList()
  },
  methods: {
    // 获取员工列表
    async getEmployeeList() {
      const res = await reqGetEmployeeList(this.params)
      // console.log(res)
      this.empList = res.data.rows
      this.total = res.data.total
    },
    // 点击分页,跳转到该页,重新拉取数据
    pageChange(page) {
      this.params.page = page
      this.getEmployeeList()
    },
    // 定义格式化聘用形式的方法
    formatEmployment(type) {
      const obj = {
        1: '正式',
        2: '非正式'
      }
      return obj[type]
    },
    // 定义格式化处理时间的方法
    formatTime(time) {
      return dayjs(time).format('YYYY-MM-DD')
    },
    // 点击删除按钮删除当前员工信息
    deleteEmploy(id) {
      this.$confirm('此操作将永久删除该员工信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delEmployee(id)
        // 重新拉取数据
        this.getEmployeeList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击新增按钮弹框显示
    addEmploy() {
      this.showDialog = true
    },
    // 点击 x号 或 返回 关闭弹窗
    closeDialog() {
      this.showDialog = false
    },
    // 点击导出
    exportExcel() {
      import('@/vendor/Export2Excel').then(async excel => {
        // 1.准备表头中的中英文对应关系
        const headerRelation = {
          '手机号': 'mobile',
          '姓名': 'username',
          '入职日期': 'timeOfEntry',
          '聘用形式': 'formOfEmployment',
          '工号': 'workNumber',
          '转正日期': 'correctionTime',
          '部门': 'departmentName'
        }
        // 2.调用接口准备表格数据 (从数组库拉取当前页的最新的数据完成导出)
        const res = await reqGetEmployeeList(this.params)
        // console.log(res)
        // 3.调用处理方法进行数据处理
        const { data, header } = transSourceDataToArray(res.data.rows, headerRelation)
        // console.log(data, header)
        excel.export_json_to_excel({
          header: header, // 表头数据
          data: data, // 表格数据 (二维数组)
          filename: '员工列表',
          autoWidth: true,
          bookType: 'xlsx' // 生成的文件类型
        })
        // this.downloadLoading = false
      })
    },
    // 点击查看
    goDetail(id) {
      this.$router.push({
        path: '/employeesDetail',
        query: {
          id
        }
      })
    },
    // 点击头像显示弹框
    createQR(imgInfo) {
      // console.log(imgInfo)
      if (!imgInfo.staffPhoto) return // 有图片才显示弹层
      // 这句代码会进行视图更新,但是视图更新操作会被包装到一个task里面(promise微任务 -> 宏任务)
      this.showCodeDialog = true
      this.$nextTick(() => {
        // 如果这里 url 写的是网址, 就会跳转到对应网址 (二维码分享效果)
        QrCode.toCanvas(this.$refs.myCanvas, imgInfo.staffPhoto)
      })
    },
    // 点击分配角色按钮
    editRole(id) {
      // 弹框弹出
      this.showRoleDialog = true
      this.curId = id
    },
    // 关闭角色分配弹框
    closeRoleDialog() {
      this.showRoleDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.employees-container {
  .staff {
    width: 70px;
    height: 70px;
    border-radius: 50%;
  }
}
.img-container {
  border-radius: 50%;
  img{
    width: 60px;
  }
}
</style>
